<!DOCTYPE html>
<html>

<head>
    <title>不规则曲线移动动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }

        svg {
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>

<body>
    <!-- 这段代码创建了全屏不规则曲线动画，使用正弦波和余弦波组合生成自然波动效果，通过requestAnimationFrame实现平滑移动，自动适配屏幕尺寸。 -->
    <svg id="canvas">
        <path id="wave" stroke="#00ffcc" fill="none" stroke-width="3" />
        <image href="https://wimg.588ku.com/gif320/24/07/09/69563d8ad59d475abc555ba39e083954.gif" height="80"
            width="120" x="-75" y="-60">
            <animateMotion dur="35s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#wave" />
            </animateMotion>
        </image>
    </svg>
    <script>
        const svg = document.getElementById('canvas');
        const wave = document.getElementById('wave');
        let points = [];
        const maxPoints = 500;
        let offsetX = 0;

        function generateCurvePoint(index) {
            const height = svg.clientHeight;
            return {
                x: index * 10,
                //y = 基线 + 快速振荡(sin) + 慢速起伏(cos)
                //在这段代码中，Math.cos的作用是为曲线添加‌复合波形效果‌，具体表现为：

                // ‌主波形生成‌
                // Math.sin(index * 0.2) 产生高频主波形（周期≈31.4单位），振幅占高度的30% 3

                // ‌次级波纹叠加‌
                //Math.cos(index * 0.05) 添加低频次级波（周期≈125.6单位），振幅占高度的20 %，作用包括：

                //使曲线产生缓慢起伏的包络效果
                //打破纯正弦波的单调性
                // 形成类似"波浪上的涟漪"的复合形态5
                //sin，cos周期性：均为2π
                // 值域：均为[-1, 1]
                // 连续性：在整个定义域内连续

                y: height / 2 + Math.sin(index * 0.2) * height * 0.3
                    + Math.cos(index * 0.05) * height * 0.2
            };
        }

        function updateCurve() {
            // 添加新点
            while (points.length < maxPoints) {
                const lastX = points.length > 0 ? points[points.length - 1].x : 0;
                points.push(generateCurvePoint(lastX / 10 + 1));
            }

            // 构建路径
            let d = `M ${points[0].x - offsetX} ${points[0].y}`;
            for (let i = 1; i < points.length; i++) {
                d += ` L ${points[i].x - offsetX} ${points[i].y}`;
            }
            wave.setAttribute('d', d);

            // 移动视窗
            offsetX += 2;
            if (offsetX > points[0].x + 1000) {
                points.shift();
            }

            requestAnimationFrame(updateCurve);
        }

        window.addEventListener('resize', () => {
            svg.setAttribute('width', window.innerWidth);
            svg.setAttribute('height', window.innerHeight);
        });

        // 初始化点
        for (let i = 0; i < maxPoints; i++) {
            points.push(generateCurvePoint(i));
        }

        updateCurve();
    </script>
</body>

</html>